<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traffic Light</title>

</head>

<body>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</body>
<script>
    function green() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light");
        }
        document.getElementsByClassName("green")[0].classList.add("light")
    }

    function red() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light");
        }
        document.getElementsByClassName("red")[0].classList.add("light")
    }

    function yellow() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light");
        }
        document.getElementsByClassName("yellow")[0].classList.add("light")
    }
</script>
<style>
    div {
        background-color: grey;
        display: inline-block;
        margin: 30px;
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }
    
    .green.light {
        background-color: green;
    }
    
    .yellow.light {
        background-color: yellow;
    }
    
    .red.light {
        background-color: red;
    }
    
    .cell {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: gray;
        border-bottom: solid 1px white;
        border-right: solid 1px white;
        vertical-align: middle;
    }
    
    #container {
        width: 701px;
    }
</style>

</html>